<!--
 * @Description: 
 * @Author: 47
 * @Date: 2022-12-27 13:23:10
 * @LastEditors: 47
 * @LastEditTime: 2023-02-18 15:29:02
-->
<template>
    <div class="discussion-reply">
        <!-- 导航栏 -->
        <van-nav-bar :title="courseTitle" left-arrow @click-left="onClickLeft">
            <template #right>
                <van-icon name="share-o" size="18" @click="showShare = true"/>
            </template>
        </van-nav-bar>

        <!-- 分享面板 -->
        <van-share-sheet
            v-model:show="showShare"
            title="立即分享给好友"
            :options="options"
        />

        <!-- 搜索框 -->
        <van-search
        v-model="value"
        shape="round"
        placeholder="搜索"
        />


        <!-- 讨论信息 -->
        <div class="discuss-msg">
            <div class="disscuss-head">
                <img src="/images/headphoto.jpg" alt="" @click="goPeopleHome">
                <div class="text">
                    <div class="name">{{ discussMsg.discuss_author }}</div>
                    <div class="other">
                        <span class="time">{{ discussMsg.discuss_time }}</span>
                        <span class="reply">回复：{{ disList.length }}</span>
                    </div>
                </div>
            </div>
            <div class="discuss-title">
                {{discussMsg.discuss_content}}
            </div>
        </div>


        <!-- 评论区 -->
        <div class="comment">
            <!-- 点赞 -->
            <van-cell class="like-msg">
                <span class="like-persons" v-for="likePeople in likeList" :key="likePeople.user_id">
                    {{likePeople.user_name}} 
                </span>
                <span class="like-num">等{{discussMsg.discuss_like_count}}人点赞</span>
            </van-cell>

            <!-- 评论列表 -->
            <van-list
                v-model:loading="loading"
                :finished="finished"
                finished-text="没有更多了"
                @load="onLoad"
            >
                <!-- 评论项 -->
                <div class="comment-item" v-for="(list,index) in disList" :key="list.comment_id">
                    <img src="/images/headphoto.jpg" alt="" @click="goPeopleHome">
                    <div class="comment-msg">
                        <span class="name">{{ list.user_name }} 
                            <button class="follow">关注</button>
                        </span>
                        <span>
                            <span class="floor">第{{ disList.length - index }}楼</span>
                            <span class="time">{{ $filters.relativeTime(list.comment_time) }}</span>
                        </span>

                        <!-- 普通回复 -->
                        <div class="content" v-html="list.comment_content" v-if="list.comment_type == 1">
                        </div>

                        <!-- 地图 -->
                        <div class="content" v-if="list.comment_type == 2">

                          <div class="mapLink">
                            <img src="/images/map.png" alt="" class="mapImg">
                            <i><van-icon name="location" color="#0496f4"/>{{list.comment_content}}</i>
                          </div>

                        </div>
                        
                    </div>
                    <!-- <van-icon class="like-btn" name="good-job-o" /> -->
                </div> 
                
                           
            </van-list>
        </div>

        <!-- 添加评论 -->
        <BottomComment :discussId="route.params.discussId"/>

    </div>
</template>

<script setup>
import { ref,onMounted } from 'vue';
import { Search } from 'vant';

// 引入路由
import {useRouter,useRoute} from 'vue-router'

// 导入 course 仓库
import {useCourseStore} from '@/stores/course'
import { storeToRefs } from 'pinia';

// 实例化仓库对象
const course = useCourseStore()

// 解构 数据
const {courseTitle,discussMsg,disList,likeList} = storeToRefs(course)

// 解构 方法
const {getDiscussDetail,getLikeList} = course

//页面挂载后渲染 
onMounted(() => {
  // 获取讨论详情页信息以及对应的评论区
  getDiscussDetail(route.params.discussId,1)
   getLikeList(route.params.discussId,2)
})

// 创建路由对象
const router = useRouter()
const route = useRoute()

const onClickLeft = () => {
  router.push('/CourseDiscussion')
}

// 评论列表
const loading = ref(false);
const finished = ref(true);

//分享面板
const showShare = ref(false);
const options = [
    [
    { name: '微信', icon: 'wechat' },
    { name: '朋友圈', icon: 'wechat-moments' },
    { name: '微博', icon: 'weibo' },
    { name: 'QQ', icon: 'qq' },
    ],
];

// 列表加载
const onLoad = () => {
  
}

// 跳转到PeopleHome页面
const goPeopleHome = () => {
  router.push('/peoplehome')
}
</script>

<style scoped lang="less">
.discussion-reply{
    :deep(.van-nav-bar)  {
        width: 100%;
        position: fixed;
    
        .van-nav-bar__title{
        font-size: 15px;
        font-weight: 600;
        }
    }
    :deep(.van-share-sheet__options){
      justify-content: space-around;
    }

    .van-search{
        padding-top: 50px;
    }

    .discuss-msg{
        .disscuss-head{
            display: flex;
            flex-flow: row;
            padding: 15px;
            img{
                width: 50px;
                border-radius: 5px;
            }
            .text{
                margin-left: 13px;
                margin-top: 5px;
                .name{
                    font-size: 14px;
                }
                .other{
                    margin-top: 5px;
                    color: #9c9c9f;
                    .reply{
                        margin-left: 15px;
                    }
                }
            }
        }

        .discuss-title{
            padding: 0px 15px;
            font-size: 16px;
            font-weight: 600;

        }
    }

    .comment{
        margin-top: 20px;
        margin-bottom: 33px;
        .like-msg{
            background-color: #fafafa;
            :deep(.van-cell__value){
                text-align: left;
            }
            .like-persons{
                margin-right: 5px;
            }
            .like-num{
                color: #5bb0d9;
            }
        }

        .comment-item{
            display: flex;
            flex-flow: row nowrap;
            background-color: #fafafa;
            :deep(.van-cell__value){
                text-align: left;
            }
            img{
                width: 40px;
                height: 40px;
                border-radius: 5px;
                margin: 10px;
            }
            .comment-msg{
                display: flex;
                flex-flow: column;
                width: 270px;
                margin-top: 5px;
                margin-bottom: 20px;
                margin-left: 5px;
                

                .name{
                    font-size: 15px;
                    margin-bottom: 5px;
                    .follow{
                            color: #5bb0d9;
                            border-color: #5bb0d9;
                            background-color: white;
                            border-radius: 7px;
                            font-size: 12px;
                            padding: 1px;
                            width: 30px;
                            height: 15px;
                            margin-left: 3px;
                            border-style: solid;
                    }
                }
                .floor{
                    font-size: 12px;
                        color: #B4B4B6;
                        margin-right: 10px;
                }
                .time{
                    font-size: 12px;
                    color: gainsboro;
                }
                .content{
                    font-size: 15px;
                    margin-top: 10px;

                    .mapLink{
                      display: flex;
                      flex-flow: row;
                      padding: 10px;
                      background-color: #f2f6f7;
                      border-radius: 5px;
                      .mapImg{
                        margin: 0 10px 0 0;
                        width: 50px;
                        height: 50px;

                      }
                    }
                }
            }
            .like-btn{
                font-size: 19px;
                margin-top: 16px;
                margin-right: 15px;
            }
        }
 
    }

}
</style>>

